<template>
  <div class="mayBg1">
    <!--    用于截图生成base64-->
    <canvas v-show="false"></canvas>
    <!--    end-->
    <div class="topIt">
      <!-- 顶部 -->
      <div class="inTop">
        <!-- 考试名称 -->
        <div class="examName">
          单片机程序与设计
        </div>
        <!-- end -->
        <!-- /时间 -->
        <div class="">
          <div class="inTime">
            <i class="el-icon-alarm-clock nao"></i>
            <span>剩余时间</span>
            <span class="thisTiem">{{ showTime }}</span>
          </div>
        </div>
        <!-- end -->
      </div>
      <!-- end -->
    </div>
    <!-- 导航栏和考试内容 -->
    <div class="inExamC">

      <div class="leftNav">
        <div class="topSheet">
          <!-- 答题卡及状态表示区域 -->
          <div class="sheet">
            <div class="sheetName">
              答题卡
            </div>
            <div class="inSheetRight">
              <div class="dinShett">
                已答
                <div class="sheetStatus">

                </div>
              </div>
              <div class="dinShett">
                当前
                <div class="sheetStatus1">

                </div>
              </div>
              <div class="dinShett">
                未答
                <div class="sheetStatus2">

                </div>
              </div>
            </div>
          </div>
          <!-- end -->
          <!-- 答题进度区域 -->
          <div class="progress">
            <div class="inProgress">
              <div class="inProgressN">
                答题进度
              </div>
              <div class="inProgressNum">
                {{ changeIndex + 1 }}/{{ thenList.length }}
              </div>
            </div>
            <!-- 进度条 -->
            <div class="myProgress">
              <el-progress :show-text="false" :percentage='getNum(thenList)' color="#397efd">
              </el-progress>
            </div>
            <!-- end -->
            <!-- 题数及分制 -->
            <div class="score">
              共 {{ thenList.length }} 题，满分100分
            </div>
            <!-- end -->
          </div>
          <!-- end -->
          <!-- 答题卡状态显示区域 -->
          <div class="sheetIn">
            <div class="">
              题目<i class="el-icon-arrow-down
					"></i>
            </div>
            <div class="sheetNumber">
              <div class="" v-for="(item,index) in thenList" :key="index" @click="tuchSheet(index)">
                <!-- 单选状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '单选题' && index != changeIndex &&   item.select != ''">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '单选题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '单选题' && index != changeIndex &&  item.select == ''">
                  {{ index + 1 }}
                </div>
                <!-- end -->

                <!-- 判断题状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '判断题' && index != changeIndex &&   item.select != ''">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '判断题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '判断题' && index != changeIndex &&  item.select == ''">
                  {{ index + 1 }}
                </div>
                <!-- end -->

                <!-- 多选题状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '多选题' && index != changeIndex &&   item.select != ''">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '多选题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '多选题' && index != changeIndex &&  item.select == ''">
                  {{ index + 1 }}
                </div>
                <!-- end -->

                <!-- 填空状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '填空题' && index != changeIndex &&   item.select != ''">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '填空题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '填空题' && index != changeIndex &&  item.select == ''">
                  {{ index + 1 }}
                </div>
                <!-- end -->

                <!-- 简答题状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '简答题' && index != changeIndex &&   item.select != ''">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '简答题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '简答题' && index != changeIndex &&  item.select == ''">
                  {{ index + 1 }}
                </div>
                <!-- end -->

                <!-- 扫码题状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '扫码题' && index != changeIndex &&   item.select != ''">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '扫码题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '扫码题' && index != changeIndex &&  item.select == ''">
                  {{ index + 1 }}
                </div>
                <!-- end -->

                <!-- 材料题状态判断 -->
                <div class="sheetNumberIn"
                     v-if="item.type == '阅读题' && index != changeIndex &&  item.select > 0 ">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn1" v-if="item.type == '阅读题' && index == changeIndex">
                  {{ index + 1 }}
                </div>
                <div class="sheetNumberIn2"
                     v-if="item.type == '阅读题' && index != changeIndex &&  item.select == 0">
                  {{ index + 1 }}
                </div>
                <!-- end -->

              </div>
            </div>
          </div>
          <!-- end -->
        </div>

        <!-- 提交按钮 -->
        <div v-if="!isPost" class="submiting" @click="submitPaper(0,'无')">
          提交
        </div>
        <div v-if="isPost" class="submiting" style="background-color: #9fb0cc">
          提交中...
        </div>

        <!-- end -->
      </div>

      <!-- 试题区域 -->
      <div class="testQuestions">
        <el-carousel :autoplay="false" :loop="false" arrow="never" indicator-position="none" style="padding-bottom: 16px;
				border-bottom: solid 1px #dadcde;
				width: 100%;
				min-height: 78vh;" ref="cardShow" @change="changeCard">
          <el-carousel-item v-for="(item,index) in thenList" :key="index"
                            style="height: 78vh;width: 100%;overflow-y:scroll;">
            <div class="" style="height: 78vh;">

              <!-- 题型区域 -->
              <div class="sheet">
                <div class="sheetName" v-if="item.type== '单选题'">
                  单选题（{{ item.score }}分）
                </div>
                <div class="sheetName" v-if="item.type== '多选题'">
                  多选题（{{ item.score }}分）
                </div>
                <div class="sheetName" v-if="item.type== '判断题'">
                  判断题（{{ item.score }}分）
                </div>
                <div class="sheetName" v-if="item.type== '填空题'">
                  填空题（{{ item.score }}分）
                </div>
                <div class="sheetName" v-if="item.type== '简答题'">
                  简答题（{{ item.score }}分）
                </div>
                <div class="sheetName" v-if="item.type== '阅读题'">
                  阅读题（{{ item.score }}分）
                  <span style="color: red;">注：小题置于材料下面</span>
                </div>
                <div class="sheetName" v-if="item.type== '扫码题'">
                  扫码题（{{ item.score }}分）
                  <span style="color: red;">注：扫描下方二维码上传答案完成后,点击加载答案刷新数据。</span>
                </div>
              </div>
              <!-- end -->
              <!-- 试题区域 -->
              <div class="qusetionArea">
                <!-- 问题区域 -->
                <div class="qusetion"
                     v-if="item.type == '单选题' || item.type == '多选题' || item.type == '填空题' || item.type == '判断题' || item.type == '简答题' || item.type == '阅读题' || item.type == '扫码题'">
                  <div class="">
                    <!-- <i class="el-icon-location-information locationIn"></i> -->
                  </div>
                  <div class="" style="display: flex;margin-left: 8px;">
                    <span>{{ index + 1 }}</span>、
                    <div class="thiQuestion" v-html="item.title"></div>
                  </div>

                </div>
                <!-- end -->

                <!-- 选项区域 -->
                <div class="selectQ">
                  <div class="mySelect">
                    <div class="selectOn">

                      <!-- 单选 -->
                      <div class="" v-if="item.type == '单选题'">
                        <!-- 选项区域 -->
                        <!-- 小题选项 -->
                        <div class="minQuest">
                          <div class="">
                            <span style="font-weight: bold; color: #397efd;">A、</span>
                            <el-radio size="medium" border v-model="item.select" label="A">
                              {{ item.A }}
                            </el-radio>
                          </div>
                          <div class="" style="margin-top: 16px;">
                            <span style="font-weight: bold; color: #397efd;">B、</span>
                            <el-radio size="medium" border v-model="item.select" label="B">
                              {{ item.B }}
                            </el-radio>
                          </div>
                          <div class="" style="margin-top: 16px;">
                            <span style="font-weight: bold; color: #397efd;">C、</span>
                            <el-radio size="medium" border v-model="item.select" label="C">
                              {{ item.C }}
                            </el-radio>
                          </div>
                          <div class="" style="margin-top: 16px;">
                            <span style="font-weight: bold; color: #397efd;">D、</span>
                            <el-radio size="medium" border v-model="item.select" label="D">
                              {{ item.D }}
                            </el-radio>
                          </div>
                          <div class="" style="margin-top: 16px;" v-if="item.E">
                            <span style="font-weight: bold; color: #397efd;">E、</span>
                            <el-radio size="medium" border v-model="item.select" label="E">
                              {{ item.E }}
                            </el-radio>
                          </div>
                          <div class="" style="margin-top: 16px;" v-if="item.F">
                            <span style="font-weight: bold; color: #397efd;">F、</span>
                            <el-radio size="medium" border v-model="item.select" label="B">
                              {{ item.F }}
                            </el-radio>
                          </div>
                        </div>
                      </div>
                      <!-- end -->

                      <!-- 判断题选项区域 -->
                      <div class="" v-if="item.type == '判断题'">
                        <!-- 选项区域 -->
                        <!-- 小题选项 -->
                        <div class="minQuest">
                          <div class="">
                            <span style="font-weight: bold; color: #397efd;">A、</span>
                            <el-radio size="medium" border v-model="item.select" label="A">
                              对
                            </el-radio>
                          </div>
                          <div class="" style="margin-top: 16px;">
                            <span style="font-weight: bold; color: #397efd;">B、</span>
                            <el-radio size="medium" border v-model="item.select" label="B">
                              错
                            </el-radio>
                          </div>
                        </div>
                        <!-- end -->
                      </div>
                      <!-- end -->

                      <!-- 多选选项区域 -->
                      <div class="" style="" v-if="item.type=='多选题'">
                        <div class="">
                          <span style="font-weight: bold; color: #397efd;">A、</span>
                          <el-checkbox size="medium" v-model="item.select" label="A"
                                       border="">
                            {{ item.A }}
                          </el-checkbox>
                        </div>
                        <div class="" style="margin-top: 16px;">
                          <span style="font-weight: bold; color: #397efd;">B、</span>
                          <el-checkbox size="medium" v-model="item.select" label="B"
                                       border="">
                            {{ item.B }}
                          </el-checkbox>
                        </div>
                        <div class="" style="margin-top: 16px;">
                          <span style="font-weight: bold; color: #397efd;">C、</span>
                          <el-checkbox size="medium" v-model="item.select" label="C"
                                       border="">
                            {{ item.C }}
                          </el-checkbox>
                        </div>
                        <div class="" style="margin-top: 16px;">
                          <span style="font-weight: bold; color: #397efd;">D、</span>
                          <el-checkbox size="medium" v-model="item.select" label="D"
                                       border="">
                            {{ item.D }}
                          </el-checkbox>
                        </div>
                        <div class="" style="margin-top: 16px;" v-if="item.E">
                          <span style="font-weight: bold; color: #397efd;">E、</span>
                          <el-checkbox size="medium" v-model="item.select" label="E"
                                       border="">
                            {{ item.E }}
                          </el-checkbox>
                        </div>
                        <div class="" style="margin-top: 16px;" v-if="item.F">
                          <span style="font-weight: bold; color: #397efd;">F、</span>
                          <el-checkbox size="medium" v-model="item.select" label="F"
                                       border="">
                            {{ item.F }}
                          </el-checkbox>
                        </div>
                      </div>
                      <!-- end -->

                      <!-- 填空题填空区域 -->
                      <div class="" v-if="item.type== '填空题'">
                        <div class=""
                             style="display: flex; align-items: center;margin-bottom: 16px;"
                             v-for="(it,ine) in stringToArray(item.tian)" :key="ine">

                          <div class="">
                            第<span style="margin: 0 2px;">{{ ine + 1 }}</span>空
                          </div>
                          <!-- 选项区域 -->
                          <div class="inSelect">
                            <el-input style="width: 320px;" :clearable="true" maxlength="20"
                                      show-word-limit v-model="item.select[ine]"
                                      placeholder="请输入内容">
                            </el-input>

                          </div>
                          <!-- end -->
                        </div>

                      </div>
                      <!-- end -->

                      <!-- 简答题区域 -->
                      <div class="" style="display: flex;" v-if="item.type== '简答题'">
                        <!-- 选项区域 -->
                        <div class="inSelect">
                          <el-input style="width: 660px;" type="textarea" :clearable="true"
                                    maxlength="500" show-word-limit v-model="item.select"
                                    placeholder="请输入内容"></el-input>
                          <!-- <span>{{it.option}}</span> -->
                        </div>
                        <!-- end -->
                      </div>
                      <!-- end -->

                      <!-- 材料题区域 -->
                      <div class="" v-if="item.type == '阅读题'">
                        <div class="" v-for="(it,ine) in item.json" :key="ine"
                             style="display: flex;align-items:flex-start;margin-top: 20px; padding-bottom: 16px;">
                          <div class="" style="margin-left: 10px;">
                            <span style="margin: 0 2px;">（{{ ine + 1 }}）、</span>
                          </div>
                          <!-- 选项区域 -->
                          <div class="inSelect1">
                            <div class="" v-html="it.title">
                            </div>
                            <div class="inCS">
                              <div class="miniSelect">
                                <!-- 材料单选 -->
                                <div class="" v-if="it.type == '单选题'">
                                  <!-- 选项区域 -->
                                  <!-- 小题选项 -->
                                  <div class="minQuest">
                                    <div @click="selectReadDan(index)" class="">
																			<span
                                          style="font-weight: bold; color: #397efd;">A、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="A">
                                        {{ it.A }}
                                      </el-radio>
                                    </div>
                                    <div @click="selectReadDan(index)" class=""
                                         style="margin-top: 16px;">
																			<span
                                          style="font-weight: bold; color: #397efd;">B、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="B">
                                        {{ it.B }}
                                      </el-radio>
                                    </div>
                                    <div @click="selectReadDan(index)" class=""
                                         style="margin-top: 16px;">
																			<span
                                          style="font-weight: bold; color: #397efd;">C、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="C">
                                        {{ it.C }}
                                      </el-radio>
                                    </div>
                                    <div @click="selectReadDan(index)" class=""
                                         style="margin-top: 16px;">
																			<span
                                          style="font-weight: bold; color: #397efd;">D、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="D">
                                        {{ it.D }}
                                      </el-radio>
                                    </div>
                                    <div @click="selectReadDan(index)" class=""
                                         style="margin-top: 16px;" v-if="it.E">
																			<span
                                          style="font-weight: bold; color: #397efd;">E、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="E">
                                        {{ it.E }}
                                      </el-radio>
                                    </div>
                                    <div @click="selectReadDan" class=""
                                         style="margin-top: 16px;" v-if="it.F">
																			<span
                                          style="font-weight: bold; color: #397efd;">F、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="F">
                                        {{ it.F }}
                                      </el-radio>
                                    </div>
                                  </div>
                                  <!-- end -->
                                </div>

                                <!-- 材料判断 -->
                                <div class="" v-if="it.type == '判断题'">
                                  <!-- 选项区域 -->
                                  <!-- 小题选项 -->
                                  <div class="minQuest">
                                    <div class="">
																			<span
                                          style="font-weight: bold; color: #397efd;">A、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="A">
                                        对
                                      </el-radio>
                                    </div>
                                    <div class="" style="margin-top: 16px;">
																			<span
                                          style="font-weight: bold; color: #397efd;">B、</span>
                                      <el-radio size="medium" border
                                                v-model="it.select" label="B">
                                        错
                                      </el-radio>
                                    </div>
                                  </div>
                                  <!-- end -->
                                </div>
                                <!-- end -->

                                <!-- 材料多选 -->
                                <div class="" v-if="it.type == '多选题'">
                                  <div class="">
																		<span
                                        style="font-weight: bold; color: #397efd;">A、</span>
                                    <el-checkbox size="medium" v-model="it.select"
                                                 label="A" border="">
                                      {{ it.A }}
                                    </el-checkbox>
                                  </div>
                                  <div class="" style="margin-top: 16px;">
																		<span
                                        style="font-weight: bold; color: #397efd;">B、</span>
                                    <el-checkbox size="medium" v-model="it.select"
                                                 label="B" border="">
                                      {{ it.B }}
                                    </el-checkbox>
                                  </div>
                                  <div class="" style="margin-top: 16px;">
																		<span
                                        style="font-weight: bold; color: #397efd;">C、</span>
                                    <el-checkbox size="medium" v-model="it.select"
                                                 label="C" border="">
                                      {{ it.C }}
                                    </el-checkbox>
                                  </div>
                                  <div class="" style="margin-top: 16px;">
																		<span
                                        style="font-weight: bold; color: #397efd;">D、</span>
                                    <el-checkbox size="medium" v-model="it.select"
                                                 label="D" border="">
                                      {{ it.D }}
                                    </el-checkbox>
                                  </div>
                                  <div class="" style="margin-top: 16px;"
                                       v-if="item.E">
																		<span
                                        style="font-weight: bold; color: #397efd;">E、</span>
                                    <el-checkbox size="medium" v-model="it.select"
                                                 label="E" border="">
                                      {{ it.E }}
                                    </el-checkbox>
                                  </div>
                                  <div class="" style="margin-top: 16px;"
                                       v-if="item.F">
																		<span
                                        style="font-weight: bold; color: #397efd;">F、</span>
                                    <el-checkbox size="medium" v-model="it.select"
                                                 label="F" border="">
                                      {{ it.F }}
                                    </el-checkbox>
                                  </div>
                                </div>
                                <!-- end -->

                                <!-- 材料填空 -->
                                <div class="" v-if="it.type == '填空题'">
                                  <div class=""
                                       style="display: flex; align-items: center;margin-bottom: 16px;"
                                       v-for="(sit,sine) in stringtoArray(it.answer)"
                                       :key="sine">
                                    <div class="">
                                      第<span
                                        style="margin: 0 2px;">{{ sine + 1 }}</span>空
                                    </div>
                                    <!-- 选项区域 -->
                                    <div class="inSelect">
                                      <el-input style="width: 320px;"
                                                :clearable="true" maxlength="20"
                                                show-word-limit
                                                v-model="it.select[sine]"
                                                placeholder="请输入内容">
                                      </el-input>
                                      <!-- <span>{{it.option}}</span> -->
                                    </div>
                                    <!-- end -->
                                  </div>
                                </div>
                                <!-- end -->

                                <!-- 材料题简答 -->
                                <div class="" v-if="it.type == '简答题'">
                                  <!-- 选项区域 -->
                                  <div class="inSelect">
                                    <el-input type="textarea" style="width: 660px;"
                                              :clearable="true" maxlength="500"
                                              show-word-limit v-model="it.select"
                                              placeholder="请输入内容">
                                    </el-input>
                                  </div>
                                  <!-- end -->
                                </div>
                                <!-- end -->

                              </div>

                            </div>
                          </div>
                          <!-- end -->
                        </div>
                      </div>
                      <!-- end -->

                      <!-- 扫码题 -->
                      <!-- 简答题区域 -->
                      <div class="" style="" v-if="item.type== '扫码题'">
                        <!-- 选项区域 -->
                        <div class="inSelect">
                          <el-input style="width: 700px;" type="textarea" :clearable="true"
                                    maxlength="500" show-word-limit v-model="item.select"
                                    placeholder="请输入内容"></el-input>
                          <!-- <span>{{it.option}}</span> -->
                        </div>
                        <div class="inAnswerIN">
                          <div class="">
                            <!-- <img class="addEr" src="../../assets/erwma.png"
                              @click="tuchEr(index)"> -->
                            <div class="" style="margin-top: 24px;">
                              <div class="addEr" :id="`qrcodeImg${index + 1}`">
                              </div>
                            </div>
                            <div @click="getAnswerImage(index)" class="showAnswer">
                              加载答案
                            </div>
                          </div>
                          <div class="imageInto">
                            <div v-for="(t,i) in item.answerImage" :key="i" class="ansImageIn">
                              <el-image
                                  style="width: 170px; height: 170px;border-radius: 8px;"
                                  :src="t" :preview-src-list="item.answerImage">
                              </el-image>
                            </div>

                          </div>

                        </div>
                        <!-- end -->
                      </div>
                      <!-- end -->
                      <!-- end -->

                    </div>
                  </div>
                </div>
                <!-- end -->
              </div>
              <!-- end -->
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- <div class="myQusetionInit" v-for="(item,index) in qusetionList" :key="index">

        </div> -->

        <!-- 上一题 下一题 -->
        <div class="LorN">
          <div class="inLorN">
            <div class="lastIn" @click="arrClick('prev')">
              上一题
            </div>
            <div class="nextIn" @click="arrClick('next')">
              下一题
            </div>
          </div>
        </div>

      </div>
      <!-- end -->
      <!-- 右边个人信息及监控区域 -->
      <div class="statusing">
        <div class="">
          <div class="" style="width: 100%;text-align: center;">
            <img :src="userInfo.heard" class="photo">
          </div>
          <div class="infoIn">
            <div class="inthis">
              <span class="then">姓名</span>：{{ userInfo.name }}
            </div>
            <div class="inthis">
              <span class="then">证件:</span> &nbsp;&nbsp;{{ userInfo.idcard }}
            </div>
            <div class="inthis">
              <span class="then">专业</span>：{{ userInfo.majors.title }}
            </div>
            <div class="hint">
              <div class="" style="font-size: 18px;">
                温馨提示
              </div>
              <div class="" style="margin-top: 6px;font-size: 16px;line-height: 1.3;">
                {{ verifyFave.hint }}。
              </div>

            </div>
          </div>
        </div>

        <!-- 摄像头画面区域 -->
        <div class="" style="width: 100%;text-align: center;">
          <div class="headInfo" id="id_local_video" style="width:100%;"></div>

        </div>
        <!-- end -->
      </div>
      <!-- end -->

    </div>
    <!-- end -->

    <!--    考试结束倒计时交卷-->

    <el-dialog
        :title="alertDialog.title"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :visible.sync="alertDialog.dialogVisible"
        width="30%"
    >
      <span>{{ alertDialog.hint }}</span>
      <span slot="footer" style="text-align: center">
  </span>
    </el-dialog>
    <!--    end-->

  </div>
</template>

<script>
import QRCode from "qrcodejs2"
import crypto from '@/components/crypto.js'

let liveTimer; // 定时检测是否在推流中
let ws;
let timer; // 保持监听用户异常行为检测
let livePusher = null
let _this;
export default {
  data() {
    return {
      pushUrl: '', // 推流地址
      examInfo: {}, // 当前考试列表
      alertDialog: {
        dialogVisible: false, // 时间结束倒计时交卷
        title: '提示',
        hint: '考试结束倒计时交卷中...',
        time: 3,
        thint: '', // 老师后台终止考试提示消息
        isPost: false, // 老师是否将强制提交
      },
      showTime: '--:--:--', //当前倒计时时间
      dowTime: 60 * 90, //当前时间
      userInfo: null,
      verifyFave: {
        hint: '请勿在光线昏暗的地方进行考试，考试时请勿将头部移出摄像头视线之外',
        time: 1000 * 60 * 10, //10分钟检测一次
        timesNum: 6, //最多可以违规次数
      },
      isPost: false, //当前是否发送请求
      changeIndex: 0,
      thenList: [],
    };
  },
  watch: {
    "alertDialog.dialogVisible": {
      handler: function (newVal) {
        if (newVal) {
          let timer = setInterval(() => {
            if (this.alertDialog.time == 1) {
              if (this.alertDialog.isPost) { //来自老师的强制交卷
                this.submitPaper(0, this.verifyFave.hint)
              } else {
                this.submitPaper(1, '无')
              }
              clearInterval(timer)
            }
            this.alertDialog.hint = `${this.alertDialog.thint}---${this.alertDialog.time--}`;
          }, 1000)
        }
      }
    },
    immediate: true,
    deep: true
  },
  methods: {

    getAnswerImage(index) {
      let id = this.thenList[index].id;
      this.$axios.post('https://api.jsonbug.com/api/v1.QuestionImgCreate/getImg', {
        exam_id: this.examInfo.id,
        question_id: this.thenList[index].id,
        user_id: this.userInfo.id
      }).then(res => {
        const {
          data
        } = res.data;
        this.$set(this.thenList[index], 'answerImage', data.img_url == null ? 0 : data.img_url.split(
            ','));
      })
    },
    stringtoArray(val) {
      if (val) return val.split(',')
    },
    answer: function (val) {
      if (val) return crypto.decrypt(val);
    },
    stringToArray(val) {
      if (val) return crypto.decrypt(val).split(',');
    },

    stringToArrayAddKey: function (val) {
      if (!val) return;
      let data = JSON.parse(this.answer(val));
      data.forEach(item => {
        if (item.type == '单选题' || item.type == '简答题' || item.type == '判断题') {
          item.select = ''
        } else if (item.type == '多选题' || item.type == '填空题' || item.type == '阅读题') {
          item.select = []
        }
      })
      return data;
    },
    getNum(val) {
      let num = 0
      let jin = 0
      for (let a = 0; a < val.length; a++) {
        if (val[a].select != '' && val[a].type != '阅读题') {
          num++
        }
        if (val[a].type == '阅读题' && val[a].select == 1) {
          num++
        }
      }
      if (num > 0) {
        return parseInt((num / val.length) * 100)
      }
      return 0;

    },
    /**
     * 交卷
     */ async submitPaper(is_normal, hint, record) {

      if (!this.alertDialog.isPost) { //判断教师是否终止考试
        // 检测是否到可以交卷的时间
        if (record == null) { // 判断是否是违规次数过多强制交卷
          if (this.examInfo.exam_shor) {
            let time = 60 * this.examInfo.shor_time;
            let duration = 60 * this.examInfo.duration;
            if ((duration - this.dowTime) < time) { // 还没到可以交卷的时间
              this.$message.info(`还未达到交卷时间,最早在开始考试${this.examInfo.shor_time}分钟后交卷,请耐心检查`);
              return
            }
          }
        }
      }

      this.isPost = true;
      let data = [];
      let image1 = this.$ls.get('image1');
      let image2 = this.$ls.get('image2');
      let image3 = this.$ls.get('image3');
      data.push(image1);
      data.push(image2);
      data.push(image3);
      let dataObj;
      try {
        dataObj = await this.$axios.post('https://vvv.52ecode.cn/api/Upload/uploadFilesImg', {
          base: this.printImage(),
        });
      } catch (e) {
      }

      this.$axios.post('https://vvv.52ecode.cn/api/v1.StudentTestRecord/index', {
        website_id: 1,
        major_id: this.userInfo.majors ? this.userInfo.majors.id : '',
        class_id: this.examInfo.class_id,
        exam_id: this.examInfo.id,
        user_name: this.userInfo.name,
        submit_type: '正常提交',
        idcard: this.userInfo.idcard,
        level: this.userInfo.majors.level,
        pass_score: this.examInfo.pass_score, //及格分数
        total_score: this.examInfo.total_score, //考试总分
        start_face: _this.$ls.get('image0'), //图片第一张
        middle_face: data.length > 0 ? data.join() : '', //中间3张
        end_face: dataObj.data.code == 200 ? dataObj.data.data : '', //交卷一张
        exam_type: '考试',
        is_normal: is_normal,
        hint_msg: hint,
        start_time: this.$day(this.$ls.get('startTime') * 1000).format("YYYY-MM-DD H:m:s"),
        examStart_time: this.examInfo.start_time, //考试开始时间
        examEnd_time: this.examInfo.end_time, //考试结束时间
        content: JSON.stringify(this.thenList) //考试内容
      }).then(res => {
        // 修改保存状态
        this.saveExamStatus("已交卷");

        this.isPost = false;
        if (res.status === 200) {
          livePusher.stopPush(); //停止快直播推流
          // // 关闭摄像头
          livePusher.stopCamera();
          // 关闭麦克风
          livePusher.stopMicrophone();

          this.$message.success('提交成功！即将返回到考试列表页面');
          setTimeout(() => {
            this.$ls.clear()   // 清楚所有考试缓存
            this.$router.push('examListContent')
          }, 1000)
        }
      }).catch(err => {
        this.isPost = false;
      })

    },

    /**
     * 考试倒计时
     */
    timeCountDown: function () {
      let timer = setInterval(() => {
        let time = this.dowTime;
        if (time >= 0) {
          let hour = Math.floor(time / (60 * 60) % 24) < 10 ? `0${Math.floor(time / (60 * 60) % 24)}` : Math.floor(time / (60 * 60) % 24);
          let minutes = Math.floor((time / 60) % 60) < 10 ? `0${Math.floor((time / 60) % 60)}` : Math.floor((time / 60) % 60);
          let seconds = Math.floor(time % 60) < 10 ? `0${Math.floor(time % 60)}` : Math.floor(time % 60);
          this.showTime = hour + ':' + minutes + ":" + seconds;
          --this.dowTime
        } else {
          clearInterval(timer)
          this.showTime = '00:00:00';
          this.alertDialog.dialogVisible = true;
        }
      }, 1000)
    },

    tuchEr(index) {
      if (this.thenList[index].erNum == 0 && this.thenList[index].type == '扫码题') {
        this.thenList[index].erNum += 1
        let key = `?uid=${_this.userInfo.id}&eid=${_this.examInfo.id}&qid=${_this.thenList[index].id}`;
        new QRCode(`qrcodeImg${index + 1}`, {
          width: 110,
          height: 110,
          text: `https://vvv.52ecode.cn/answerUpload/#/?key=${decodeURIComponent(crypto.encrypt(key))}`, // 二维码内容
          render: "table", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          colorDark: "#000", // 背景色
          colorLight: "#fff", // 前景色
        });
      }
    },
    getLastSelect(val) {
      let sum = 0;
      val.forEach(item => {
        if (item.type == '单选题' || item.type == '简答题' || item.type == '判断题') {
          if (item.select != '') {
            sum++;
          }
        }

        if (item.type == '多选题' || item.type == '填空题') {
          if (item.select.length > 0) {
            sum++;
          }
        }
      })
      return sum;

    },

    selectReadDan: function (index) {
      this.thenList[index].select = 1;
    },

    /**
     * 获取数据
     */
    getData() {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.ChapterSubject/index', {
        id: 34,
        website_id: 1,
      }).then(res => {

        this.verifyFave.time = res.data.data.other['time'];
        this.verifyFave.timesNum = res.data.data.other['timesNum'];

        // 用于随机截图
        this.randomToolImage();
        // end

        // 开始定时检测用户违规行为
        // if(this.examInfo.video_monitor){ //是否开启视频监控 只有开启视频监控才能定时检测用户异常行为
        //
        // }
        this.startVerifFace();
        // end

        let duration = this.$ls.get('duration');

        let startTime = this.$ls.get('startTime', -1);
        if (startTime != -1) {
          let time = res.data.time;
          let endTime = startTime + (60 * duration);
          this.dowTime = endTime - time
        } else {
          this.dowTime = 60 * duration;
        }
        let data = res.data.data.data
        if (startTime == -1) { //查看是否有开始时间
          this.$ls.set('startTime', res.data.time, 1000 * 60 * (duration ? duration : 120) + 10) // 多缓存10 秒
        }

        //倒计时定时开始
        this.timeCountDown();
        //end

        for (let i in data) {
          if (data[i].type == '阅读题') {
            data[i].json = this.stringToArrayAddKey(data[i].json);
            data[i].select = this.getLastSelect(data[i].json)
          }
          data[i].erNum = 0
          if (data[i].type == '单选题' || data[i].type == '判断题' || data[i].type == '简答题' || data[i]
              .type == '扫码题') {
            data[i].select = ''
          } else if (data[i].type == '多选题' || data[i].type == '填空题') {
            data[i].select = []
          }
        }
        this.thenList = data
      })
    },

    /**
     * 检测用户违规行为
     */
    startVerifFace: function () {
      timer = setInterval(() => {
        let random = parseInt(Math.random() * 2)
        if (random >= 1) {
          this.faceSearch(this.printImage());
        } else {
          this.faceVerify(this.printImage());
        }
      }, this.verifyFave.time) //
    },

    faceSearch: function (base64Img) {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.Face/faceSearch', {
        image: base64Img,
      }).then(res => {
        this.isPost = false;
        const {data, msg, code} = res.data;
        if (code === 400) return this.wangHint("没检擦到人脸,请尽快纠正");
        if (code === 200) {
          if (data.Results[0].Candidates[0].Score <= 80) {
            this.wangHint("检测到有异常行为")
          }
          //成功
        }
      }).catch(() => {
      })
    },

    faceVerify: function (base64Img) {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.Face/faceVerify', {
        image: base64Img,
        PersonId: this.userInfo.idcard
      }).then(res => {
        this.isPost = false;
        const {data, msg, code} = res.data;
        if (code === 400) return this.wangHint("没检擦到人脸,请尽快纠正");
        if (data.Score <= 80) {
          this.wangHint("检测到不是本人认证")
        }
      }).catch(() => {
      })
    },

    /**
     * 保存学习违规记录
     */
    saveillegalRecord: function (hint) {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.ExamIllegal/index', {
        website_id: 1,
        exam_id: this.examInfo.id,
        class_id: this.examInfo.class_id,
        class_name: this.examInfo.title,
        user_image: this.userInfo.heard,
        user_name: this.userInfo.name,
        idcard: this.userInfo.idcard,
        illegal: hint
      })
    },

    /**
     * 警告提示
     */
    wangHint: function (hint) {
      let obj = {
        type: 'illegal',
        illegal_id: this.userInfo.id,
        to: 168
      }
      ws.send(JSON.stringify(obj))
      this.saveillegalRecord(hint);
      this.verifyFave.hint = hint;
      let msg = hint;
      this.verifyFave.timesNum--;
      setTimeout(() => {
        if (this.verifyFave.timesNum % 2) {
          this.verifyFave.hint = `当前还有${this.verifyFave.timesNum}次违规。否则将强制交卷`
        }
      }, 3000)
      if (this.verifyFave.timesNum == 0) { // 考试结束 强行交卷
        this.verifyFave.hint = '考试结束。'
        this.submitPaper(1, msg, 'hint');
        return;
      }
      setTimeout(() => {
        this.verifyFave.hint = '请勿在光线昏暗的地方进行考试，考试时请勿将头部移出摄像头视线之外'
      }, 1000 * 10)
    },

    /**
     * 打开摄像头
     */
    getCompetence() {
      livePusher = null;
      let _this = this;

      livePusher = new TXLivePusher();
      livePusher.setRenderView('id_local_video');
      document.getElementById('id_local_video').getElementsByTagName('video')[0].muted = true; //关闭声音
      // 设置视频质量
      livePusher.setVideoQuality('480p');
      // 设置音频质量
      livePusher.setAudioQuality('high');
      // 自定义设置帧率
      livePusher.setProperty('setVideoFPS', 25);
      livePusher.setProperty('setAudioSampleRate', 44100);
      // 打开摄像头
      livePusher.startCamera();
      // 打开麦克风
      livePusher.startMicrophone();

      let hasVideo = false;
      let hasAudio = false;
      let isPush = false;

      // 检测准备工作到位以后 开启直播
      livePusher.setObserver({
        onError: function (code, msg, extraInfo) { // 直播错误回调
          // livePusher.destroy();
          // setTimeout(() => {
          //   _this.getCompetence();
          // }, 3000)
        },
        onWarning: function (code, msg, extraInfo) { // 打不开摄像提示
          // console.log(msg)
          // console.log("onWarning================================")
        },
        onCaptureFirstAudioFrame: function () {
          hasAudio = true;
          if (hasVideo && !isPush) {
            isPush = true
            livePusher.startPush(_this.pushUrl);
          }
        },
        onCaptureFirstVideoFrame: function () {
          hasVideo = true;
          if (hasAudio && !isPush) {
            isPush = true;
            livePusher.startPush(_this.pushUrl);
          }
        }
      })

      clearInterval(liveTimer);
      liveTimer = setInterval(() => {
        if (!livePusher.isPushing()) { //判断当前是否在推流
          livePusher.startPush(_this.pushUrl);
        }
      }, 5000)

    },
    changeCard(e) {
      this.changeIndex = e
      this.tuchEr(e)
    },
    arrClick(e) {
      if (e === 'next') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
      this.tuchEr(this.changeIndex)
    },
    tuchSheet(index) {
      this.$refs.cardShow.setActiveItem(index)
    },
    /**
     * 生成随机数数
     * @param Min 最小值
     * @param Max 最大值
     * @returns {*}
     * @constructor
     */
    RandomNumBoth(Min, Max) {
      let Range = Max - Min;
      let Rand = Math.random();
      return Min + Math.round(Rand * Range); //四舍五入
    },
    /**
     * 生成截图
     * @returns {string}
     */
    printImage: function () {
      let canvas1 = document.querySelector('canvas');
      let context1 = canvas1.getContext('2d');
      let video = document.querySelector('video');
      canvas1.setAttribute("width", video.videoWidth);
      canvas1.setAttribute("height", video.videoHeight);
      context1.drawImage(video, -50, -20, video.videoWidth / 2.5, video.videoHeight / 2.5);
      return canvas1.toDataURL('image/jpg');
    },

    /**
     * 最后一张照片
     */
    getImage: function () {
      this.$axios.post('https://vvv.52ecode.cn/api/Upload/uploadFilesImg', {
        base: base64Img,
      });
    },
    /**
     * 图片上传
     * @param base64Img 图片编码
     * @param key
     */
    uploadImage: function (base64Img, key) {
      this.$axios.post('https://vvv.52ecode.cn/api/Upload/uploadFilesImg', {
        base: base64Img,
      }).then(res => {
        const {data, code} = res.data;
        let duration = this.$ls.get('duration');
        if (code === 200) return this.$ls.set(key, data, 1000 * 60 * (duration ? duration : 120) + 10);
      })
    },
    /**
     * 随机截图
     */
    randomToolImage: function () {
      for (let i = 0; i < 3; i++) {
        let random = this.RandomNumBoth(1, 30);
        setTimeout(() => {
          this.uploadImage(this.printImage(), `image${i + 1}`)
        }, random * 60 * 1000)
      }
    },
    getPushUrl: function () {
      if (!this.examInfo.video_monitor) return; //如果没开启视频监控则不请求
      this.$axios.post('https://vvv.52ecode.cn/adminapi/v1.exam.ExamSend/getPushUrl', {
        idcard: this.userInfo.idcard,
        eid: this.examInfo.id,
      }).then(res => {
        const {data, code} = res.data;
        if (code == 200) {
          this.pushUrl = data
        }
      })
    },

    socket: function () {
      let _this = this;
      let user = JSON.parse(sessionStorage.getItem('InfoMation')); // 获取 身份证号
      ws = new WebSocket("wss://api.jsonbug.com/wss")
      ws.onmessage = function (res) {
        let data = eval('(' + res.data + ')');
        switch (data.type) {
          case 'init':
            let obj = {
              type: 'bind',
              userId: user.idcard,
            }
            ws.send(JSON.stringify(obj))
            break;
          case 'popupMsg':
            _this.$notify({
              title: '来自老师的提示',
              message: data.content,
              duration: 0,
              type: 'warning'
            });
            break;
          case 'over':
            _this.alertDialog.title = "来自老师的提示"
            _this.verifyFave.hint = '老师：' + data.content
            _this.alertDialog.thint = data.content
            _this.alertDialog.isPost = true
            _this.alertDialog.dialogVisible = true
            break;
        }
      }

      ws.onclose = function (res) {
        setTimeout(() => {
          _this.socket();
        }, 3000)

      }
    },

    saveExamStatus: function (status) {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.ExamStatus/index', {
        website_id: 1,
        major_id: this.userInfo.majors.id,
        class_id: this.examInfo.class_id,
        exam_id: this.examInfo.id,
        user_name: this.userInfo.name,
        idcard: this.userInfo.idcard,
        exam_status: status,
      }).then(res => {
        const {data, code} = res.data;
        if (code == 200) {
          this.pushUrl = data
        }
      })
    },

  },
  created() {
    _this = this;
    this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
    this.examInfo = this.$ls.get('examInfo');
    this.socket() //连接socket
    this.getPushUrl(); //获取直播地址
    this.getData(); // 获取答题列表
    this.saveExamStatus('考试中'); // 保存考试状态

  },
  mounted() {
    this.getCompetence();

  },
  destroyed() {
    clearInterval(timer)
    clearInterval(liveTimer)

    livePusher.stopPush(); //停止快直播推流
    // // 关闭摄像头
    livePusher.stopCamera();
    // 关闭麦克风
    livePusher.stopMicrophone();
    livePusher.destroy();
  }

}
</script>

<style scoped lang="scss">
@media screen and (max-width: 1366px) {
  .headInfo > > > video {
    border-radius: 8px !important;
  }
  #id_local_video {
    border-radius: 16px;
  }

  .imageInto {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    margin-top: 200px;

  }
  .showAnswer {
    letter-spacing: 1.2pt;
    color: #fff;
    width: 120px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #397efd;
    margin-left: 16px;
  }

  .showAnswer:active {
    background-color: #7badfd;
  }

  .addEr {
    width: 130px;
    height: 130px;
    margin-left: 21px;
  }

  .inAnswerIN {
    margin-top: 16px;
    margin-left: 4px;
    display: flex;
    // flex-direction: column;
  }

  .hint {
    margin-top: 18px;
    letter-spacing: 1pt;
    color: red;
    font-size: 17px;
    cursor: pointer;
  }

  .then {
    font-weight: bold;
    font-size: 17px;
  }

  .inthis {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }

  .infoIn {
    margin-top: 16px;
  }

  .photo {
    width: 90%;
    height: 220px;
    border-radius: 8px;
  }

  .statusing {
    height: 88vh;
    border-radius: 8px;
    padding: 16px;
    width: 500px;
    margin-left: 16px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .minQuest {
  }

  .miniSelect {
    display: flex;
    padding: 16px 0;
  }

  .inCS {
    margin-top: 16px;
    margin-left: -40px;
  }

  .thiQuestion {
    margin-left: 6px;
  }

  .el-carousel__item {
    background-color: #ffffff;
  }

  .myQusetionInit {
    padding-bottom: 16px;
    border-bottom: solid 1px #dadcde;
    min-height: 78vh;
  }

  .topSheet {
    padding-bottom: 16px;
    border-bottom: solid 1px #dadcde;
    min-height: 78vh;
  }

  .nextIn {
    background-color: #3496fc;
    padding: 6px 40px;
    font-size: 18px;
    border-radius: 4px;
    color: #ffffff;
  }

  .lastIn {
    border: solid 1px #3496fc;
    padding: 6px 40px;
    font-size: 18px;
    border-radius: 4px;
    color: #3496fc;
  }

  .lastIn:active {
    border: solid 1px #4dc8fc;
    color: #4dc8fc;
  }

  .nextIn:active {
    background-color: #4dc8fc;
  }

  .inLorN {
    margin-top: -6px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .LorN {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  .square1 {
    width: 24px;
    height: 24px;
    /* background-color: #000066; */
    background-color: #73d9fd;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .inSquare1 {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #397efd;
  }

  .square {
    width: 24px;
    height: 24px;
    /* background-color: #000066; */
    border-radius: 50%;
    background-color: #73d9fd;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .inSquare {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #397efd;
  }

  .inSelect {
    margin-top: 2px;
    margin-left: 20px;
    width: auto;
  }

  .inSelect1 {
    width: auto;
  }

  .selectOn {
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  .selectQ {
    margin-top: 16px;
  }

  .locationIn {
    color: #929aaf;
    font-size: 20px;
  }

  .qusetion {
    display: flex;
    line-height: 1.5;
    letter-spacing: 0.5pt;
    cursor: pointer;
    font-size: 18px;
  }

  .qusetionArea {
    margin-top: 16px;
  }

  .testQuestions {
    overflow: scroll-y;
    cursor: pointer;
    margin-left: 16px;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 88vh;
    width: 100%;
  }

  .submiting {
    margin-top: 16px;
    padding: 6px 0;
    font-size: 18px;
    border-radius: 4px;
    color: #FFFFFF;
    letter-spacing: 1pt;

    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #3397fc;
    text-align: center;
    cursor: pointer;
  }

  .postSubmit {
    margin-top: 16px;
    padding: 6px 0;
    font-size: 18px;
    border-radius: 4px;
    color: #FFFFFF;
    letter-spacing: 1pt;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #9fb0cc;
    text-align: center;
    cursor: pointer;

  }

  .submiting:active {
    background-color: #61d8fc;
  }

  .sheetNumber {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 16px;
    grid-gap: 10px 6px;
    margin-right: 9px;
  }

  .sheetNumberIn {
    margin-left: 8px;
    border-radius: 3px;
    background-color: #387efd;
    height: 32px;
    width: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
  }

  .sheetNumberIn1 {
    margin-left: 8px;
    border-radius: 3px;
    border: solid 2px #387efd;
    font-weight: bold;
    height: 28px;
    width: 28px;
    color: #387efd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .sheetNumberIn2 {
    margin-left: 8px;
    font-weight: bold;
    border-radius: 3px;
    border: solid 2px #a6a6a6;
    height: 28px;
    color: #a6a6a6;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .sheetIn {
    margin-top: 16px;
  }

  .score {
    font-size: 14px;
    letter-spacing: 1pt;
    color: #81879a;
  }

  .myProgress {
    padding: 16px 0;
  }

  .inProgressNum {
    color: #acaeb3;
  }

  .inProgressN {
    font-size: 18px;
    letter-spacing: 1pt;
  }

  .inProgress {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .progress {
    margin-top: 16px;
    padding: 16px;
    background-color: #f5f9ff;
    border-radius: 8px;
  }

  .dinShett {
    display: flex;
  }

  .inSheetRight {
    display: flex;
    width: 164px;
    align-items: center;
    justify-content: space-between;
    color: #9e9897;
  }

  .sheetStatus2 {
    width: 12px;
    border-radius: 3px;
    height: 12px;
    border: solid 2px #aba4a3;
    margin-left: 4px;
    margin-top: 2px;
  }

  .sheetStatus1 {
    margin-left: 4px;
    width: 12px;
    border-radius: 3px;
    height: 12px;
    border: solid 2px #387efd;
    margin-top: 2px;
  }

  .sheetStatus {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #387efd;
    margin-top: 2px;
  }

  .sheetName {
    font-weight: bold;
    font-size: 17px;
  }

  .sheet {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #dadcde;
    padding-bottom: 16px;
  }

  .leftNav {
    background-color: #FFFFFF;
    padding: 16px;
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 88vh;
  }

  .inExamC {
    width: auto;
    /* border: saddlebrown solid 1px; */
    margin: -48px 32px 0 32px;
    display: flex;
  }

  .thisTiem {
    font-size: 20px;
    margin-left: 6px;
  }

  .nao {
    font-size: 23px;
    margin-right: 6px;
  }

  .inTime {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2a6de8;
    padding: 10px 16px;
    border-radius: 30px;
  }

  .examName {
    cursor: pointer;
    font-size: 22px;
    letter-spacing: 1.5pt;
  }

  .inTop {
    padding: 30px 32px;
    display: flex;
    justify-content: space-between;
  }

  .topIt {
    height: 130px;
    background-color: #397efd;
    color: #FFFFFF;
  }

  .mayBg1 {
    width: auto;
    height: 100vh;
    background-color: #f5f9ff;
  }
}

.headInfo > > > video {
  width: 800px;
  height: 600px;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 1366px) {
  .headInfo > > > video {
    border: solid 1px red;
    border-radius: 8px !important;
  }

  .imageInto {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    margin-top: 200px;
    margin-left: 16px;
  }

  .ansImageIn {
    width: 150px;
    height: 150px;
    border-radius: 8px;
  }

  .showAnswer {
    letter-spacing: 1.2pt;
    color: #fff;
    width: 120px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #397efd;
    margin-left: 16px;
  }

  .showAnswer:active {
    background-color: #7badfd;
  }

  .imageInto {
    width: 100%;
    display: flex;
    margin-top: 24px;

  }

  .addEr {
    width: 130px;
    height: 130px;
    margin-left: 21px;
  }

  .inAnswerIN {
    margin-top: 16px;
    margin-left: 4px;
    display: flex;
    // flex-direction: column;
  }

  .hint {
    margin-top: 18px;
    letter-spacing: 1pt;
    color: red;
    font-size: 17px;
    cursor: pointer;
  }

  .then {
    font-weight: bold;
    font-size: 16px;
  }

  .inthis {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }

  .infoIn {
    margin-top: 16px;
  }

  .photo {
    width: 90%;
    height: 220px;
    border-radius: 8px;
  }

  .statusing {
    max-height: 96vh;
    border-radius: 8px;
    padding: 16px;
    width: 400px;
    margin-left: 16px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .minQuest {
  }

  .miniSelect {
    display: flex;
    padding: 16px 0;
  }

  .inCS {
    margin-top: 16px;
    margin-left: -40px;
  }

  .thiQuestion {
    margin-left: 6px;
  }

  .el-carousel__item {
    background-color: #ffffff;
  }

  .myQusetionInit {
    padding-bottom: 16px;
    border-bottom: solid 1px #dadcde;
    min-height: 78vh;
  }

  .topSheet {
    padding-bottom: 16px;
    border-bottom: solid 1px #dadcde;
    min-height: 78vh;
  }

  .nextIn {
    background-color: #3496fc;
    padding: 6px 40px;
    font-size: 18px;
    border-radius: 4px;
    color: #ffffff;
  }

  .lastIn {
    border: solid 1px #3496fc;
    padding: 6px 40px;
    font-size: 18px;
    border-radius: 4px;
    color: #3496fc;
  }

  .lastIn:active {
    border: solid 1px #4dc8fc;
    color: #4dc8fc;
  }

  .nextIn:active {
    background-color: #4dc8fc;
  }

  .inLorN {
    margin-top: -6px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .LorN {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  .square1 {
    width: 24px;
    height: 24px;
    /* background-color: #000066; */
    background-color: #73d9fd;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .inSquare1 {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #397efd;
  }

  .square {
    width: 24px;
    height: 24px;
    /* background-color: #000066; */
    border-radius: 50%;
    background-color: #73d9fd;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .inSquare {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #397efd;
  }

  .inSelect {
    margin-top: 2px;
    margin-left: 20px;
    width: auto;
  }

  .inSelect1 {
    width: auto;
  }

  .selectOn {
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  .selectQ {
    margin-top: 16px;
  }

  .locationIn {
    color: #929aaf;
    font-size: 20px;
  }

  .qusetion {
    display: flex;
    line-height: 1.5;
    letter-spacing: 0.5pt;
    cursor: pointer;
    font-size: 18px;
  }

  .qusetionArea {
    margin-top: 16px;
  }

  .testQuestions {
    overflow: scroll-y;
    cursor: pointer;
    margin-left: 16px;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    min-height: 84vh;
    width: 100%;
  }

  .submiting {
    margin-top: 16px;
    padding: 6px 0;
    font-size: 18px;
    border-radius: 4px;
    color: #FFFFFF;
    letter-spacing: 1pt;

    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #3397fc;
    text-align: center;
    cursor: pointer;
  }

  .submiting:active {
    background-color: #61d8fc;
  }

  .sheetNumber {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 16px;
    grid-gap: 10px 6px;
    margin-right: 9px;
  }

  .sheetNumberIn {
    margin-left: 8px;
    border-radius: 3px;
    background-color: #387efd;
    height: 32px;
    width: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
  }

  .sheetNumberIn1 {
    margin-left: 8px;
    border-radius: 3px;
    border: solid 2px #387efd;
    font-weight: bold;
    height: 28px;
    width: 28px;
    color: #387efd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .sheetNumberIn2 {
    margin-left: 8px;
    font-weight: bold;
    border-radius: 3px;
    border: solid 2px #a6a6a6;
    height: 28px;
    color: #a6a6a6;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .sheetIn {
    margin-top: 16px;
  }

  .score {
    font-size: 14px;
    letter-spacing: 1pt;
    color: #81879a;
  }

  .myProgress {
    padding: 16px 0;
  }

  .inProgressNum {
    color: #acaeb3;
  }

  .inProgressN {
    font-size: 18px;
    letter-spacing: 1pt;
  }

  .inProgress {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .progress {
    margin-top: 16px;
    padding: 16px;
    background-color: #f5f9ff;
    border-radius: 8px;
  }

  .dinShett {
    display: flex;
  }

  .inSheetRight {
    display: flex;
    width: 164px;
    align-items: center;
    justify-content: space-between;
    color: #9e9897;
  }

  .sheetStatus2 {
    width: 12px;
    border-radius: 3px;
    height: 12px;
    border: solid 2px #aba4a3;
    margin-left: 4px;
    margin-top: 2px;
  }

  .sheetStatus1 {
    margin-left: 4px;
    width: 12px;
    border-radius: 3px;
    height: 12px;
    border: solid 2px #387efd;
    margin-top: 2px;
  }

  .sheetStatus {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #387efd;
    margin-top: 2px;
  }

  .sheetName {
    font-weight: bold;
    font-size: 17px;
  }

  .sheet {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #dadcde;
    padding-bottom: 16px;
  }

  .leftNav {
    background-color: #FFFFFF;
    padding: 16px;
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    max-height: 96vh;
  }

  .inExamC {
    width: auto;
    /* border: saddlebrown solid 1px; */
    margin: -48px 32px 0 32px;
    display: flex;
  }

  .thisTiem {
    font-size: 20px;
    margin-left: 6px;
  }

  .nao {
    font-size: 23px;
    margin-right: 6px;
  }

  .inTime {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2a6de8;
    padding: 10px 16px;
    border-radius: 30px;
  }

  .examName {
    cursor: pointer;
    font-size: 22px;
    letter-spacing: 1.5pt;
  }

  .inTop {
    padding: 30px 32px;
    display: flex;
    justify-content: space-between;
  }

  .topIt {
    height: 130px;
    background-color: #397efd;
    color: #FFFFFF;
  }

  .mayBg1 {
    width: auto;
    height: 100vh;
    background-color: #f5f9ff;
  }
}
</style>
